$width:200px;
$zoomValue: 1;
$color: #f08080;
$list: (100px, 200px, 300px, 400px);
$map: (top:1px, left:2px, bottom:3px, right:4px);

$num1: 100px;
$num2: 200px;
$height: $num1 + $num2;
.box{
  width:$width;
  height:nth($list, 2);
  zoom:$zoomValue;
  background-color:$color;
}
.div{
  top: map-get($map, top);
  left: map-get($map, left);
  height:$height;
}
.div1{
  @each $key, $value in $map {
    #{$key}: $value;
  }
}

$color1: #010203;
$color2: #040506;
$color3: #9fa661;

$str: 'hello.jpg';

.div2 {
  font: 10px/8px;
  font: (10px/8);
  font: (10px*8);
  width: $width / 2;
  margin-left: (5px + 8px/2);
  color: $color1 + $color2;
}

.div3 {
  color: mix($color1, $color2);
  color: red($color3);
  color: green($color3);
  color: blue($color3);
}


@mixin helloMixin {
  display:inline-block;
  font: {
    size: 20px;
    weight:500;
  };
  color:red;
}

.div4 {
  @include helloMixin;
}

@mixin sexy-border($color, $width){
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

.div5 {
  width:100px;
  @include sexy-border(blue, 2px);
}

.div6{
  border:1px;
  background-color:red;
}
.div6ext {
  @extend .div5;
  border-width:3px;
}


.div7{
  width:$width;
  height:$width;
  background-color:$color;
  .div8{
    width:$width;
    .div-inner{
      font-size:13px;
      border: {
        left:1px solid #000;
        top:1px solid #aaa;
      }
    }
  }
  a {
    color:red;
  }
}


$type: 'tony';
p{
  @if $type == 'bufy' {
    color: red;
  } @else if $type == 'tim' {
    color: blue;
  } @else if $type == 'tony' {
    color: black;
  }
}
@if $type == 'bufy' {
  .div {
    color: red;
  }
} @else {
  .div {
    color: blue;
  }
}

@for $i from 1 through 3 {
  .item#{$i} {
    width: 1px * $i
  }
}

@for $i from 1 through length($list) {
  .list#{$i} {
    width: 1px * $i;
  }
}

$i: 6;
@while $i > 0 {
  .while#{$i} {
    width: 1px * $i;
  }

  $i: $i - 2;
}

.div10 {
  @each $key, $value in $map {
    #{$key}: $value;
  }
}



$numberPercent: 0.77;
$numberRound: 25.9;

$abs: -3;
.div{
  zoom: percentage($numberPercent);
  zoom: round($numberRound);
  zoom: ceil($numberRound);
  zoom: floor($numberRound);
  zoom: abs($abs);
  zoom: min(2, 3);
  zoom: max(2, 3);
  zoom: random(100);
}



